<template>
  <view class="memberGift">
    <scroll-view :style="{ height: mainHeight }" scroll-y class="scrollView">
      <view class="recommend" v-if="recommend.length > 0">
        <view
          v-for="(item, index) in recommend"
          :key="index"
          class="recommendi"
          @click="toGoodDetail(item.itemId)"
        >
          <view class="image">
            <image :src="baseImgUrl + item.goodImg" mode=""></image>
          </view>
          <view class="name">{{ item.goodName }}</view>
          <view
            class="hearts"
            :class="item.isCollect == 1 ? 'heartActive' : 'heart'"
            @click.stop="ClickHeart(index)"
          >
          </view>
          <view class="leftRight">
            <view class="left">
              <view class="introduce">
                <view>规格：{{ item.goodSpecs || "无规格" }}</view>
                <view>销量：{{ item.virtualSales || 0 }}</view>
              </view>
              <view class="price">
                {{ "￥" + item.retailPrice }}
              </view>
              <view class="VipPrice" v-if="item.discountPrice">
                <view class="vip">
                  <!-- 会员价 -->
                </view>
                <span>￥{{ item.discountPrice }}</span>
              </view>
            </view>
            <!-- <view class="right">
							<u-icon name="plus" color="#fff" size="15"></u-icon>
						</view> -->
          </view>
        </view>
      </view>
      <Empty v-else />
    </scroll-view>
  </view>
</template>

<script>
import collectApi from "@/api/collect";
import { baseImgUrl } from "@/config";

export default {
  data() {
    return {
      baseImgUrl,
      recommend: [],
      mainHeight: "",
    };
  },
  async onLoad() {
    // this.mainHeight = this.$store.getters.heightData.noTabMainHeight
    // this.statusBarHeight = wx.getSystemInfoSync().statusBarHeight
  },
  onLoad() {
    this.getappletCollectList();
  },
  methods: {
    toGoodDetail(id) {
      uni.navigateTo({
        url: `/subPages/details/goodDetail?id=${id}`,
      });
    },
    ClickHeart(i) {
      const params = {
        sysUid: this.recommend[i].sysUid,
        itemId: this.recommend[i].itemId,
      };
      collectApi.saveCollect(params).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "取消收藏成功",
            icon: "none",
            mask: true,
          });
          this.getappletCollectList();
        }
      });
    },
    getappletCollectList() {
      collectApi.getCollectList().then((res) => {
        this.recommend = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.memberGift {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 0 28rpx;
  background-color: #fff;

  .scrollView {
    width: 100%;

    // height: 100%;
    .recommend {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .recommendi {
      width: 48%;
      margin: 20rpx 0;
      position: relative;

      .image {
        width: 100%;
        height: 335rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 20%;
        }
      }

      .name {
        width: 100%;
        height: 55rpx;
        font-size: 28rpx;
        line-height: 55rpx;
        font-weight: 600;
      }

      .hearts {
        position: absolute;
        top: 40rpx;
        right: 40rpx;
        width: 60rpx;
        height: 60rpx;
      }

      .heart {
        background: url("../../static/images/home/heart.png") no-repeat;
        background-size: 100%;
      }

      .heartActive {
        background: url("../../static/images/home/heart_active.png") no-repeat;
        background-size: 100%;
      }

      .leftRight {
        display: flex;
        position: relative;

        .left {
          width: 100%;

          .text {
            color: #858585;
          }

          .price {
            width: 100%;
            height: 60rpx;
            font-size: 35rpx;
            line-height: 60rpx;
            font-weight: 600;
          }

          .VipPrice {
            width: 180rpx;
            height: 40rpx;
            background-color: #fee6c3;
            border-radius: 3px;
            display: flex;

            .vip {
              width: 50%;
              height: 100%;
              background: url("../../static/images/home/vip.png") no-repeat;
              background-size: 100% 100%;
              display: initial-block;
            }

            span {
              text-align: center;
            }
          }
        }

        .right {
          position: absolute;
          width: 20px;
          height: 20px;
          background-color: #ff4254;
          border-radius: 3px;
          bottom: 0;
          right: 2px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
